<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js 万花筒</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
  <style>
    body {
      margin: 0;
      overflow: hidden; /* 防止滚动条出现 */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #222; /* 深色背景 */
    }
    canvas {
        border-radius: 8px; /* 给画布加个圆角 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    }
  </style>
</head>
<body>
  <script>
    // --- p5.js Sketch ---

    let symmetry = 6; // 对称轴数量 (可以尝试修改这个值, 比如 8, 10, 12)
    let angle; // 每个对称扇区的角度
    let strokeColor; // 线条颜色 (HSB模式)
    let strokeWeightValue = 4; // 线条粗细

    function setup() {
      // 创建一个适应窗口大小的画布，但限制最大尺寸
      let canvasSize = min(windowWidth, windowHeight) * 0.9;
      createCanvas(canvasSize, canvasSize);
      angleMode(RADIANS); // 使用弧度制
      background(0); // 设置初始背景为黑色
      colorMode(HSB, 360, 100, 100, 100); // 使用 HSB 颜色模式, 方便控制颜色变化
      strokeColor = color(0, 80, 90); // 初始颜色 (红色系)
      angle = TWO_PI / symmetry; // 计算每个扇区的角度
      strokeWeight(strokeWeightValue); // 设置线条粗细
    }

    function draw() {
      // 将坐标原点移动到画布中心
      translate(width / 2, height / 2);

      // 检查鼠标是否在画布内，防止在画布外移动时也绘制
      if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
        // 获取相对于画布中心的鼠标坐标
        let mx = mouseX - width / 2;
        let my = mouseY - height / 2;
        // 获取相对于画布中心的上一帧鼠标坐标
        let pmx = pmouseX - width / 2;
        let pmy = pmouseY - height / 2;

        // 根据鼠标速度改变颜色和粗细 (可选)
        let speed = dist(mx, my, pmx, pmy);
        // strokeColor = color((frameCount * 0.5) % 360, 80, 90); // 让颜色随时间变化
        strokeColor = color(map(speed, 0, 20, 180, 360) % 360, 80, 90); // 颜色根据速度变化 (蓝到红)
        // strokeWeightValue = map(speed, 0, 20, 2, 8); // 粗细根据速度变化
        // strokeWeight(strokeWeightValue);

        stroke(strokeColor); // 设置当前线条颜色

        // 循环绘制每个对称扇区
        for (let i = 0; i < symmetry; i++) {
          rotate(angle); // 旋转坐标系

          // 绘制原始线条
          line(mx, my, pmx, pmy);

          // 进行镜像反射 (沿 Y 轴)
          push(); // 保存当前变换状态
          scale(1, -1); // 垂直翻转
          line(mx, my, pmx, pmy); // 绘制镜像线条
          pop(); // 恢复之前的变换状态
        }
      }
    }

    // 当窗口大小改变时，重新调整画布大小
    function windowResized() {
      let canvasSize = min(windowWidth, windowHeight) * 0.9;
      resizeCanvas(canvasSize, canvasSize);
      background(0); // 清空背景
    }

    // --- End of p5.js Sketch ---
  </script>
</body>
</html>
